<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京淘电商官网</title>
    <link rel="stylesheet" href="taoteshop/css/index.css">
    <link rel="stylesheet" href="taoteshop/css/basis.css">
</head>

<body>
    <div id="app">
        <div class="fix-tool">
            <a target="_blank" href="./index.html">主页</a>
            <a target="_blank" href="./index.html">特惠商品</a>
            <a target="_blank" href="./index.html">联系我们</a>
        </div>
        <div class="main-header">
            <div class="main-nav">
                <div class="list">
                    <a class="item" target="_blank" href="detail.html">京淘电商商城</a>
                    <a class="item" target="_blank" href="detail.html">店铺加盟</a>
                    <a class="item" target="_blank" href="detail.html">团购优惠</a>
                    <a class="item" target="_blank" href="detail.html">资质证照</a>
                    <a class="item" target="_blank" href="detail.html">协议规则</a>
                    <a class="item" target="_blank" href="detail.html">下载app</a>
                </div>
                <div class="login">
                    <div class="item">登陆</div>
                    <div class="item">注册</div>
                    <div class="item">消息通知</div>
                </div>
            </div>
        </div>
        <div class="main-body">
            <!-- 盒子一  -->
            <div class="container-1">
                <img src="taoteshop/img/logo-1.jpg">
                <img src="taoteshop/img/logo-2.jpg">
                <div class="nav-list">
                    <a class="item" target="_blank" href="detail.html">电脑办公</a>
                    <a class="item" target="_blank" href="detail.html">美妆</a>
                    <a class="item" target="_blank" href="detail.html">男女服装</a>
                    <a class="item" target="_blank" href="detail.html">智能手机</a>
                    <a class="item" target="_blank" href="detail.html">家具家电</a>
                    <a class="item" target="_blank" href="detail.html">路由器</a>
                    <a class="item" target="_blank" href="detail.html">智能硬件</a>
                    <a class="item" target="_blank" href="detail.html">服务</a>
                    <a class="item" target="_blank" href="detail.html">社区</a>
                </div>
                <input type="text" placeholder="华为手机 苹果电脑">
                <a class="hid-content" target="_blank" href="detail.html">
                    <div class="item">
                        <img src="img/GUCCI.jpg" alt="">
                        <p>GUCCI包包</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="img/HUAWEIMateBook16s.jpg" alt="">
                        <p>HUAWEIMateBook16s</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="img/HUAWEIP50Pro.jpg" alt="">
                        <p>HUAWEIP50Pro</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="img/iPhine13.jpg" alt="">
                        <p>iPhine13</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="img/LenovoY9000P.jpg" alt="">
                        <p>LenovoY9000P</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="img/PRADA.jpg" alt="">
                        <p>PRADA</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="img/SKII.jpg" alt="">
                        <p>SKII</p>
                        <p>1799元</p>
                    </div>
                </a>
            </div>
            <!-- 盒子二  -->
            <div class="container-2">
                <ul class="left-nav">
                    <a class="item" target="_blank" href="detail.html">手机 电话卡</a>
                    <a class="item" target="_blank" href="detail.html">电视 盒子</a>
                    <a class="item" target="_blank" href="detail.html">笔记本 平板</a>
                    <a class="item" target="_blank" href="detail.html">家电 插线板</a>
                    <a class="item" target="_blank" href="detail.html">出行 穿戴</a>
                    <a class="item" target="_blank" href="detail.html">智能 路由器</a>
                    <a class="item" target="_blank" href="detail.html">电源 配件</a>
                    <a class="item" target="_blank" href="detail.html">健康 配件</a>
                    <a class="item" target="_blank" href="detail.html">耳机 音箱</a>
                    <a class="item" target="_blank" href="detail.html">生活 箱包</a>
                    <div class="hid-content">
                        
                    </div>
                </ul>
                <div id="slider-box" class="slider-box slider-box-1">
                    <div class="switch">
                        <span class="btn" id="per" onclick="pre()">左翻</span>
                        <span class="btn" id="next" onclick="next()">右翻</span>
                    </div>
                    <ul class="nav">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <!-- 盒子三  -->
            <div class="container-3">
                <div class="nav-list">
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>苹果秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>华为秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>联想秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>Prada秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>Cucci秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>SKⅡ秒杀</span>
                    </div>
                </div>
                <img class="img-con-3" src="img/PRADA.jpg">
                <img class="img-con-3" src="img/SKII.jpg">
                <img class="img-con-3" src="img/iPhine13.jpg">
            </div>
            <!-- 盒子四  -->
            <div class="container-4">
                <div class="box">
                    <div class="title">特价优惠</div>
                    <div class="content">
                        <div class="item item-1">
                            <div class="img1"></div>
                            <p class="name">PRADA</p>
                            <p>PRADA奢侈</p>
                            <div class="price"><span class="price-now">7850元</span><span class="price-last">7940元</span>
                            </div>
                        </div>
                        <div class="item item-2">
                            <div class="img2"></div>
                            <p class="name">SKⅡ</p>
                            <p class="desc">补水，保湿，控油平衡，修护</p>
                            <div class="price"><span class="price-now">1540元</span><span class="price-last">1640元</span>
                            </div>
                        </div>
                        <div class="item item-3">
                            <div class="img3"></div>
                            <p class="name">HUAWEIP50Pro</p>
                            <p class="desc">4G低配版</p>
                            <div class="price"><span class="price-now">5988元</span><span class="price-last">6088元</span>
                            </div>
                        </div>
                        <div class="item item-4">
                            <div class="img4"></div>
                            <p class="name">华为MateBook16s</p>
                            <p class="desc">轻薄便携</p>
                            <div class="price"><span class="price-now">7799元</span><span class="price-last">7999元</span>
                            </div>
                        </div>
                        <div class="item item-5">
                            <div class="img5"></div>
                            <p class="name">联想拯救者Y9000P</p>
                            <p class="desc">拯救者yyds</p>
                            <div class="price"><span class="price-now">8999元</span><span class="price-last">9699元</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-footer">
            <div class="container">
                <div class="nav">
                    <div class="item">预约维修服务</div>
                    <div class="item">7天无理由退货</div>
                    <div class="item">15天免费换货</div>
                    <div class="item">满250元包邮</div>
                    <div class="item" >430余家售后网点</div>

                </div>
                <div class="feature-box">
                    <div class="feature">
                        <dl class="item">
                            <dt>帮助中心</dt>

                        </dl>
                        <dl class="item">
                            <dt>账户管理</dt>

                        </dl>
                        <dl class="item">
                            <dt>售后维修</dt>

                        </dl>
                        <dl class="item">
                            <dt>了解更多</dt>

                        </dl>
                        <dl class="item">
                            <dt>联系我们</dt>

                        </dl>
                        <dl class="item" style="border-right: 1px solid #ccc;">
                            <dt>关于我们</dt>

                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="taoteshop/js/index.js"></script>
    <script type="text/javascript" src="js/api.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript">

        //调用后台接口，获取商品信息表
        getGoodsList();

        var swiper = new Swiper('.swiper-container', {
            autoplay: 5000, //可选选项，自动滑动
            loop: true, //可选选项，开启循环
            pagination: '.swiper-pagination',
        });

        function go_detail(id) {
            location.href = 'detail.html?id=' + id;
        }

        function getGoodsList() {
            $.ajax({
                url: "/university/goods/queryAll",
                type: "GET",
                data: null,
                dataType: "json",
                success: function(ret) {
                    if(ret.status == "1") {
                        createGoodsList(ret.data);
                    }
                }
            });
        }

        function createGoodsList(list){
            var html = '';
            var count = 1;
            var goods_len = list.length;
            console.log("总数：" + goods_len);

            if(goods_len > 0){
                //先计算总的有多少行
                var rows = Math.ceil(goods_len / 4);
                console.log("总行数：" + rows);
                //每行有4列
                for (var i = 0; i < rows; i++) {
                    html += '<tr>';
                    for (var j = 0; j < goods_len; j++) {
                        var item = list[j];
                        var id = '\'' + item.id + '\'';
                        if(j >= (4 * (count - 1)) && j < 4 * count){
                            console.log("当前的j的值："+j);
                            html += '<td onclick="go_detail('+id+')">'
                                +	'		<div class="td_div_1">'
                                +	'			<img src="'+item.goodsPicUrl+'" />'
                                +	'		</div>'
                                +	'		<div class="td_div_2">'
                                +	'			<div>价格：￥'+ item.goodsPrice + '元</div>'
                                +	'			<div>描述：'+ item.goodsDesc + '</div>'
                                +	'		</div>'
                                +	'	</td>';
                        }
                    }
                    html += '</tr>';
                    count++;
                }
            }
            //先清空
            $("#t_body").empty();
            //在添加
            $("#t_body").html(html);
        }

    </script>
</body>

</html>